.article-data{
    margin-bottom: 40px;
}
.article-left-info{
    width: 20%;
    display: inline-block;
    text-align: center;
}
.article-left-info span{
    cursor: pointer;
    color: #222226;
    font-size: 13px;
}
.article-left-info span i{
    color: #999aaa;
    font-style: normal;
}
.article-left-info span:hover{
    color: orangered;
}
.recommend-article{
    color: #555666;
    font-size: 14px;
    cursor: pointer;
}
.recommend-article:hover{
    color: orangered;
}
.article-card{
    position: relative;
}
.article-title-box{
    margin-bottom: 8px;
}
.article-title{
    font-size: 28px;
    word-wrap: break-word;
    color: #222226;
    font-weight: 600;
    margin: 0;
    word-break: break-all;
}
.article-bar-top{
    color: #999aaa;
    width: 88%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.article-bar-top a{
    vertical-align: top;
    margin-right: 12px;
    line-height: 32px;
    font-size: 18px;
    color: #555666;
    cursor: pointer;
}
.article-bar-top a:hover{
    color: coral;
}
.article-bar-top span{
    vertical-align: top;
    margin-right: 12px;
    line-height: 32px;
    font-size: 14px;
}
.article-bar-top img{
    width: 24px;
    height: 24px;
    margin-top: 4px;
    cursor: pointer;
}
.article-info-box{
    position: relative;
    background: #f8f8f8;
    border-radius: 4px;
}
.article-type-img{
    width: 36px!important;
    height: 32px!important;
    margin-right: 12px;
    line-height: 32px;
}
.bar-content{
    display: inline-block;
    padding-top: 5px;
}
.bar-content span{
    cursor: pointer;
}

.article-tags-box{
    padding-left: 48px;
    display: flex;
}
.tags-box{
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 4px;
    margin-right: 8px;
}
.tags-box span{
    display: inline-block;
    color: #999aaa;
}
.tag-link{
    box-sizing: border-box;
    margin-right: 8px;
    padding: 3px 6px;
    font-size: 12px;
    background-color: #fff;
    color: #5094d5;
    border: 1px solid #eaeaef;
    height: 24px;
    line-height: 17px;
    border-radius: 4px;
    display: inline-block;
}
/* footer bar */
.article-footer-bar{
    cursor: auto;
    display: flex;
    background: #f8f8f8;
    color: #999aaa;
    padding-top: 10px;
    padding-bottom: 10px;
    /*margin-bottom: 10px;*/
    font-size: 14px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    position: absolute;
    padding-left: 20px;
}
.article-footer-bar img{
    width: 24px;
    height: 24px;
    cursor: pointer;
}
.article-footer-bar span{
    margin-top: 3px;
    cursor: pointer;
    margin-left: 5px;
    padding-top: 3px;
}
.article-footer-bar span:hover{
    color: orangered;
}

.unHeartComment{
    cursor: pointer;
    width: 16px;
    height: 16px;
}

.activeHeartComment{
    cursor: pointer;
    width: 16px;
    height: 16px;
}

.article-comment-record{
    /*margin-top: 10px;*/
    margin-bottom: 10px;
}

.article-comment-reply{
}

.comment-content{
    font-size: 14px;
    color: #222226;
    word-break: break-all;
    padding-left: 5px;
}

.comment-date{
    font-size: 12px;
    color: #6b6b6b;
    margin-right: 15px;
    margin-left: 10px;
}

.comment-user-name{
    font-size: 14px;
    color: #555666;
    cursor: pointer;
}
.comment-user-name:hover{
    color: darkorange;
}
